A Super Simple FLV Player using ActionScript 3.0

As part of my ongoing pursuit of learning a wide variety of technologies, I decided to see what ActionScript 3.0 was all about. As part of my learning, I decided I wanted to join the ever growing crowd of people that have “created” their own FLV Players. I knew people weren’t actually creating the video player and were really just setting up Video component in the UI and telling it what video to play, yet I still wanted to see how it was done. As such, my journey into ActionScript 3.0 began. Fair warning: I get real lazy about writing clean code, organizing my files, and setting up my development environment when I just start learning something. As such, the following embraces the lazy approach to getting things started.

Prerequisites:

Flex 2 SDK: http://www.adobe.com/products/flex/sdk/
Example FLV Files: http://www.mediacollege.com/flash/video/tutorial/example-flv.html

1) Install Flex 2 SDK

After downloading the flex_sdk_2.zip, I just unzipped the contents in to a work folder, c:\flex_sdk_2. The key resources I used from this package with were the compiler, bin\mxmlc.exe, and the debug Flash player (player\debug\SAFlashPlayer.exe).

2) As a ActionScript3 novice, I browsed a few tutorial sites. Then I went ahead and compiled and ran a few different tutorials. I found that the Beginners Guide to Getting Started with AS3 at http://www.senocular.com/flash/tutorials/as3withmxmlc/ to be very helpful, and you will find it goes into much greater detailon the use of the mxmlc.exe command line tool than I go into here. Next, I decided I want to be cool like everyone else and create an FLV Video Player. After doing a decent search, I noticed that most of the tutorials for creating FLV Video PLayers were using Flash Professional, which is outside of my “just learning” budget. However, I did find what I was looking for in the Adobe Flash Media Development Center. The tutorial taught me a lot more than I initially wanted, but it showed me exactly what I need to do to create my own.

3) Once I read the tutorial, I embarked on creating my own SuperSimpleFLVPlayer. In order to test whatever I ended up making, I needed an example FLV file and I found one at
http://www.mediacollege.com/flash/video/tutorial/example-flv.html. I downloaded ‘20051210-w50s_56K.flv’ and saved it as c:\flex_sdk_2\learning\20051210-w50s_56K.flv.

4) Next, I generated the following source in my favorite text editor:

package { 
    import flash.display.Sprite; 
    import flash.net.NetConnection; 
    import flash.net.NetStream;  

    import flash.media.Video; 
    public class SuperSimpleFLVPlayer extends Sprite {  

        private var nc:NetConnection; 
        private var ns:NetStream; 
        private var vid:Video; 
        private var client:Object; 
        public function SuperSimpleFLVPlayer () { 
            // Initialize net stream 
            nc = new NetConnection(); 
            nc.connect (null); // Not using a media server. 
            ns = new NetStream(nc); 
            // Add video to stage 
            vid = new Video(320,240); 
            addChild (vid); 
            //vid.x = ( stage.stageWidth / 2) - ( vid.width / 2 ); 
            //vid.y = ( stage.stageHeight / 2) - ( vid.height / 2 ); 
            // Changed since when deployed the 
           // above set the video player nearly off the screen 
           // Since I am lazy, I am just going to 0 them 
           // out for now. Apparently, I have a lot more 
           // to learn. 
          vid.x = 0; 
          vid.y = 0;  

          // Add callback method for listening on 
          // NetStream meta data 
          client = new Object(); 
          ns.client = client; 
          client.onMetaData = nsMetaDataCallback; 
          // Play video 
          vid.attachNetStream ( ns ); 
          ns.play ( '20051210-w50s_56K.flv' ); 
        } 
        //MetaData 
        private function nsMetaDataCallback (mdata:Object):void { 
            trace (mdata.duration); 
        } 
    } 
}

I saved the source as c:\flex_sdk_2\learning\SuperSimpleFLVPlayer.as.

5) From the command line I compiled the file:

c:/flex_sdk_2/learning>../bin/mxmlc.exe 
        -use-network=false 
        SuperSimpleFLVPlayer.as

Note that I had to use the ‘-use-network=false’ directive. This told the compiler that I will not be using the network in my testing so don’t worry about sandbox issues when trying to load the flv from my local drives. Once I decide, if I decided, to deploy this to a website, I will need to recompile my code without this directive.

6) After compilation succeeded, I loaded the swf in the debug Flash Player:

c:/flex_sdk_2/learning>../player/debug/SAFlashPlayer.exe
        SuperSimpleFLVPlayer.swf

Success. Flash and ActionScript really is multimedia made easy.

Quick Update: I found that once I actually deployed this to a website it started behaving differently than it did in the debug tool, which I am none too happy about. However, for this quick and dirty learning experience, I just changed the vid.x and vid.y to both equal 0 and now it at least put the video into a visible part of the stage. For reference, feel free to check out what I deployed at: http://www.kriggio.com/tromstick/flv/index.html. By the way, feel free to tell me what I am doing wrong if you see anything, I really am just learning ActionScript 3.0 so any “constructive” criticism helps.